<template>
	<view class="content">
		<!-- 模糊背景层 -->
		<view class="overlay" v-if="showPopup" @click="closePopup"></view>

		<!-- 弹窗主体 -->
		<view class="popup" v-if="showPopup">

			<!-- 操作按钮 -->
			<view class="showPopup-item">
				<view class="action-btn disabled" @click="addFather">
					<image class="avatar" :src="manUrl" mode="aspectFill"></image>
					<text>添加父亲</text>
				</view>
				<view class="action-btn disabled" @click="addMother">
					<image class="avatar" :src="wemanUrl" mode="aspectFill"></image>
					<text>添加母亲</text>
				</view>
			</view>
			<view class="showPopup-item">
				<view :class="this.selectMember.spouseId||this.selectMember.spouse?'disabled':''" class="action-btn middle-info" @click="addSpouse">
					<image class="avatar" :src="selectMember.gender!='0'?girlUrl:boyUrl" mode="aspectFill"></image>
					<text>添加配偶</text>
				</view>
				<view class="action-btn my-info" @click="clickSelectMember">
					<text class="my-info-tip">点击头像查看资料</text>
					<image class="avatar" :src="selectMember.gender=='0'?girlUrl:boyUrl" mode="aspectFill"></image>
					<text>{{selectMember.name}}</text>
				</view>
				<view :class="this.selectMember.spouseId?'disabled':''" class="action-btn middle-info" @click="addBrother">
					<image class="avatar" :src="boyUrl" mode="aspectFill"></image>
					<text>添加兄弟</text>
				</view>
			</view>
			<view class="showPopup-item">
				<view class="action-btn" @click="addSon">
					<image class="avatar" :src='littleBoyUrl' mode="aspectFill"></image>
					<text>添加儿子</text>
				</view>
				<view class="action-btn" @click="addDaughter">
					<image class="avatar" :src="littleGirlUrl" mode="aspectFill"></image>
					<text>添加女儿</text>
				</view>
			</view>
			<view class="showPopup-item">
				<button class="popup-edit" @click="editMember">编辑</button>
				<button class="popup-delete" @click="deleteMember">删除</button>
			</view>
		</view>
		<view v-if="memberList.length==0" class="empty-state">
			<image src="@/static/no-member.png" class="empty-icon" />
			<text class="empty-text">还没有成员, 添加一个吧</text>
			<button class="add-btn" @click="openAddMember">
				<uni-icons type="plus" class="plus-icon" size="20"></uni-icons>
				添加成员
			</button>
		</view>
		<view v-else>
			<fg-tree ref="fgTreeRef" :width="2000" :height="2000" :list="memberList" @check="openPopup"></fg-tree>
			<view class="reset_view" @tap="resetView">点击复位</view>
			<view class="rotate_view" @tap="rotateView">点击旋转</view>
		</view>
	</view>
</template>

<script>
	import fgTree from "@/components/fg-tree/index.vue"
	import {
		getGenealogyMemberTree,
		deleteGenealogyMember
	} from "@/api/record/genealogyMember.js"
	export default {
		components: {
			fgTree
		},
		data() {
			return {
				manUrl: '/static/man.jpeg',
				wemanUrl: '/static/weman.jpeg',
				boyUrl: '/static/boy.jpeg',
				girlUrl: '/static/girl.jpeg',
				littleBoyUrl: '/static/little-boy.jpeg',
				littleGirlUrl: '/static/little-girl.jpeg',
				showPopup: false,
				isLoad: false,
				genealogyId: 0,
				selectMember: {},
				memberList: []
			}
		},
		onLoad(event) {

			console.log(event.genealogyId);
			this.genealogyId = event.genealogyId
			this.loadData();
			this.isLoad = true;

		},
		onShow(event) {
			if (!this.isLoad) {
				this.loadData();
			}
			this.isLoad = false;
		},
		methods: {
			loadData() {
				getGenealogyMemberTree(this.genealogyId).then(resp => {
					console.log(resp);
					this.memberList = resp.data;
				})
			},
			openPopup(item) {
				this.showPopup = true;
				this.selectMember = item;
				console.log('this.selectMember')
				console.log(this.selectMember);
			},
			closePopup(event) {
				console.log(event);
				// 点击背景层关闭弹窗，点击弹窗内部不关闭
				//if (event.target.className === 'overlay') {
				this.showPopup = false;
				//}
			},
			clickSelectMember() {
				console.log('clickSelectMember' + this.selectMember.id);
				// uni.navigateTo({
				// 	url: '/pages/work/genealogy/member-edit?memberId=' + this.selectMember.id
				// });
				uni.navigateTo({
					url: '/pages/package/genealogy/member-detail?memberId=' + this.selectMember.id
				});
				this.showPopup = false;
			},
			editMember() {
				uni.navigateTo({
					url: '/pages/package/genealogy/member-edit?memberId=' + this.selectMember.id
				});
				this.showPopup = false;
			},
			deleteMember() {
				if (this.selectMember.children){
					this.showPopup = false;
					uni.showToast({
						title: '不能删除有子女的节点！',
						icon: 'error'
					});
					return;
				}
				deleteGenealogyMember(this.selectMember.id).then(resp => {
					console.log(resp);
					this.loadData();
					this.showPopup = false;
				})
			},
			openAddMember() {
				uni.navigateTo({
					url: '/pages/package/genealogy/member-edit?genealogyId=' + this.genealogyId + '&type=addRoot'
				});
			},
			addSpouse() {
				console.log('添加配偶');
				// 处理添加配偶逻辑
				uni.navigateTo({
					url: '/pages/package/genealogy/member-edit?genealogyId=' + this.genealogyId + '&memberId=' + this
						.selectMember.id + '&gender=' + this.selectMember.gender + '&type=addSpouse'
				});
				this.showPopup = false;
			},
			addFather() {
				console.log('添加父亲');
				// 处理添加父亲逻辑
			},
			addMother() {
				console.log('添加母亲');
				// 处理添加母亲逻辑
			},
			addBrother() {
				console.log('添加兄弟');
				uni.navigateTo({
					url: '/pages/package/genealogy/member-edit?genealogyId=' + this.genealogyId + '&parentId=' + this
						.selectMember.parentId + '&type=addBrother'
				});
				this.showPopup = false;
				// 处理添加兄弟逻辑
			},
			addSon() {
				// 处理添加儿子逻辑
				console.log('添加儿子');
				
				var parentId = this.selectMember.spouseId?this.selectMember.spouseId : this.selectMember.id;
				uni.navigateTo({
					url: '/pages/package/genealogy/member-edit?genealogyId=' + this.genealogyId + '&parentId=' + parentId + '&type=addSon'
				});
				this.showPopup = false;
			},
			addDaughter() {
				// 处理添加女儿逻辑
				console.log('添加女儿');
				var parentId = this.selectMember.spouseId?this.selectMember.spouseId : this.selectMember.id;
				uni.navigateTo({
					url: '/pages/package/genealogy/member-edit?genealogyId=' + this.genealogyId + '&parentId=' + parentId + '&type=addDaughter'
				});
				this.showPopup = false;
			},
			// 节点点击回调
			checkItem(item) {

				console.log('节点信息：', item);
				//item.name = '测试1';
				this.showPopup = true;
				this.selectMember = item;

				// uni.navigateTo({
				// 	url: '/pages/work/genealogy/member-edit?genealogyId=' + item.id
				// });
				// 创建族谱的逻辑
				// uni.navigateTo({
				// 	url: '/pages/work/genealogy/member-detail?genealogyId=' + item.id
				// });
			},
			// 视角复位
			resetView() {
				this.$nextTick(() => {
					this.$refs.fgTreeRef.refreshView()
				})
			},
			rotateView() {
				this.$nextTick(() => {
					this.$refs.fgTreeRef.rotateView()
				})
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
		/* #ifndef MP-WEIXIN */
		padding-top: 20rpx;
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-top: 80rpx;
		/* #endif */
		box-sizing: border-box;
	}
	
	.disabled {
		opacity: 0.9;
		    filter: grayscale(1);
		    pointer-events: none;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.popup {
		position: fixed;
		top: 10%;
		bottom: auto;
		left: 0;
		width: 100%;
		/* transform: translate(-50%, -50%); */
		background-color: rgba(0, 0, 0, 0);
		border-radius: 10px;
		z-index: 1000;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	uni-image.empty-icon {
		width: 38pt;
		height: 28pt;
		object-fit: fill;
		margin-top: 150pt;
		margin-bottom: 10pt;
	}

	.empty-text {
		color: #959ba7;
	}

	.empty-state>button {
		margin-top: 10pt;
	}

	.showPopup-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.popup-edit {
		color: orange;
		width: 120px;
		border-radius: 25px;
	}

	.popup-delete {
		background-color: orange;
		color: white;
		width: 120px;
		border-radius: 25px;
	}

	uni-view.action-btn.my-info {
		width: 100pt;
		height: 110pt;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.my-info-tip{
		font-size: 8pt;
	}

	.middle-info {
		display: flex;
		align-items: center;
		justify-content: center !important;
		flex-direction: column;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-bottom: 5px;
	}

	.action-btn {
		background-color: #f0f0f0;
		color: #333;
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
		width: 100px;
	}

	.reset_view {
		position: absolute;
		/* #ifndef MP-WEIXIN */
		top: 40rpx;
		top: calc(constant(safe-area-inset-top) + 40rpx);
		top: calc(env(safe-area-inset-top) + 40rpx);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 180rpx;
		/* #endif */
		right: 40rpx;
		font-size: 30rpx;
		background-color: #f1f1f1;
		color: #333;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.rotate_view {
		position: absolute;
		/* #ifndef MP-WEIXIN */
		top: 120rpx;
		top: calc(constant(safe-area-inset-top) + 120rpx);
		top: calc(env(safe-area-inset-top) + 120rpx);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 260rpx;
		/* #endif */
		right: 40rpx;
		font-size: 30rpx;
		background-color: #f1f1f1;
		color: #333;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}
</style>